<template>
  <div class="simulation-test">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="title"
      :rightText="'考试记录'"
      :handleClickRight="handleClickRight"
    ></white-header>
    <div class="haed-tips">
      <p>
        *温馨提示：进入{{
          title
        }}后中途退出会直接评分，为不影响您的最终成绩，请谨慎退出哦～
      </p>
    </div>
    <template v-for="(item, index) in paperList">
      <!-- 未考过 开始 -->
      <div
        class="test-box"
        @click="toStartTest(item)"
        v-if="item.testNum == 0"
        :key="'test-box' + index"
      >
        <img
          class="logo-tips"
          :src="
            getTestPaperStatus(item) == 1
              ? '/img/mobile/question_analog_start.png'
              : '/img/mobile/question_analog_notstart.png'
          "
          alt=""
        />
        <div class="test-content">
          <div class="test-name">{{ item && item.name }}</div>
          <div class="test-info">
            <span>题数：{{ item && item.questionNum }}道</span>
            <span class="line"></span>
            <span>限时：{{ item && item.span }}分钟</span>
            <span class="line"></span>
            <span>满分：{{ item && item.total }}分</span>
          </div>
          <div class="test-time">
            <img src="/img/mobile/paper-time.png" alt="" />
            <span
              >考试时间：{{ trimDate(item.examinationStartDate) }} -
              {{ trimDate(item.examinationDeadlineDate) }}</span
            >
          </div>
        </div>
      </div>
      <!-- 未考过 结束 -->

      <!-- 已考过 开始 -->
      <div
        class="done-test"
        v-if="item.testNum > 0"
        :key="'done-test' + index"
        @click="toStartTest(item)"
      >
        <div class="done-content">
          <div class="done-title">
            <div class="title-left">{{ item && item.name }}</div>
            <div class="title-right">已考完</div>
          </div>
          <div class="done-info">
            <!-- <span>
                        <img src="/img/mobile/record_answer.png" alt="">
                        答对：<span class="red">30/40</span>
                    </span>
                    <span class="line"></span>
                    <span>
                        <img src="/img/mobile/record_clock.png" alt="">
                        用时：<span class="red">25分钟</span>
                    </span>
                    <span class="line"></span>
                    <span class="fraction">
                        <img src="/img/mobile/record_time.png" alt="">
                        得分：<span class="number">70</span><span class="n-t">分</span>
                    </span> -->
            <span>
              <svg
                class="svg-box"
                width="28px"
                height="28px"
                viewBox="0 0 30 30"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>答对</title>
                <g
                  id="PC-图标-"
                  stroke="none"
                  stroke-width="1"
                  fill="none"
                  fill-rule="evenodd"
                >
                  <path
                    d="M30,0 L30,30 L0,30 L0,0 L30,0 Z M24.2857143,1 L5.71428571,1 C3.11065761,1 1,3.11065761 1,5.71428571 L1,24.2857143 C1,26.8893424 3.11065761,29 5.71428571,29 L24.2857143,29 C26.8893424,29 29,26.8893424 29,24.2857143 L29,23.3571429 C29,22.8048581 28.5522847,22.3571429 28,22.3571429 C27.4477153,22.3571429 27,22.8048581 27,23.3571429 L27,24.2857143 C27,25.7847729 25.7847729,27 24.2857143,27 L5.71428571,27 C4.21522711,27 3,25.7847729 3,24.2857143 L3,5.71428571 C3,4.21522711 4.21522711,3 5.71428571,3 L24.2857143,3 C25.7847729,3 27,4.21522711 27,5.71428571 L27,13.520209 C27,14.0724937 27.4477153,14.520209 28,14.520209 C28.5522847,14.520209 29,14.0724937 29,13.520209 L29,5.71428571 C29,3.11065761 26.8893424,1 24.2857143,1 Z M27.318131,16.2685256 L20.5735151,22.5557511 L17.7609621,19.2569555 C17.4026419,18.8366877 16.7714715,18.7864693 16.3512037,19.1447896 C15.9309359,19.5031099 15.8807176,20.1342803 16.2390379,20.5545481 L19.0515908,23.8533437 C19.7682314,24.6938793 21.0305721,24.794316 21.8711077,24.0776754 L21.937253,24.0186998 L28.681869,17.7314744 C29.0858511,17.3548885 29.1080602,16.7221132 28.7314744,16.318131 C28.3548885,15.9141489 27.7221132,15.8919398 27.318131,16.2685256 Z M16,14.5 L8,14.5 C7.44771525,14.5 7,14.9477153 7,15.5 C7,16.0522847 7.44771525,16.5 8,16.5 L16,16.5 C16.5522847,16.5 17,16.0522847 17,15.5 C17,14.9477153 16.5522847,14.5 16,14.5 Z M22,7.5 L8,7.5 C7.44771525,7.5 7,7.94771525 7,8.5 C7,9.05228475 7.44771525,9.5 8,9.5 L22,9.5 C22.5522847,9.5 23,9.05228475 23,8.5 C23,7.94771525 22.5522847,7.5 22,7.5 Z"
                    id="形状结合"
                    fill="#FFFFFF"
                  ></path>
                </g>
              </svg>
              <span>答对：</span
              ><span class="red"
                >{{ item.trueCount || 0 }}/{{ item.questionNum || 0 }}</span
              >
            </span>
            <span class="line"></span>
            <span>
              <svg
                class="svg-box"
                width="28px"
                height="28px"
                viewBox="0 0 30 30"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>用时</title>
                <g
                  id="PC-图标-"
                  stroke="none"
                  stroke-width="1"
                  fill="none"
                  fill-rule="evenodd"
                >
                  <path
                    d="M30,0 L30,30 L0,30 L0,0 L30,0 Z M15,1 C7.2680135,1 1,7.2680135 1,15 C1,22.7319865 7.2680135,29 15,29 C22.7319865,29 29,22.7319865 29,15 C29,7.2680135 22.7319865,1 15,1 Z M15,3 C21.627417,3 27,8.372583 27,15 C27,21.627417 21.627417,27 15,27 C8.372583,27 3,21.627417 3,15 C3,8.372583 8.372583,3 15,3 Z M14.5,9 C13.9477153,9 13.5,9.44771525 13.5,10 L13.5,10 L13.5,16 L13.5067277,16.1166211 C13.5644928,16.6139598 13.9871642,17 14.5,17 L14.5,17 L20.5,17 L20.6166211,16.9932723 C21.1139598,16.9355072 21.5,16.5128358 21.5,16 L21.5,16 L21.4932723,15.8833789 C21.4355072,15.3860402 21.0128358,15 20.5,15 L20.5,15 L15.5,15 L15.5,10 L15.4932723,9.88337887 C15.4355072,9.38604019 15.0128358,9 14.5,9 Z"
                    id="形状结合"
                    fill="#FFFFFF"
                  ></path>
                </g>
              </svg>
              <span>用时：</span
              ><span class="red">{{ item.useTime || 0 }}分钟</span>
            </span>
            <span class="line"></span>
            <span class="fraction">
              <svg
                class="svg-box"
                width="28px"
                height="28px"
                viewBox="0 0 30 30"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>得分</title>
                <g
                  id="PC-图标-"
                  stroke="none"
                  stroke-width="1"
                  fill="none"
                  fill-rule="evenodd"
                >
                  <path
                    d="M30,0 L30,30 L0,30 L0,0 L30,0 Z M15,1 C7.2680135,1 1,7.2680135 1,15 C1,22.7319865 7.2680135,29 15,29 C22.7319865,29 29,22.7319865 29,15 C29,7.2680135 22.7319865,1 15,1 Z M15,3 C21.627417,3 27,8.372583 27,15 C27,21.627417 21.627417,27 15,27 C8.372583,27 3,21.627417 3,15 C3,8.372583 8.372583,3 15,3 Z M20.067229,10.4524624 L12.8474699,18.163572 L9.8006232,13.7319361 C9.48773121,13.2768349 8.86514976,13.1615516 8.41004863,13.4744436 C7.95494749,13.7873356 7.8396642,14.4099171 8.1525562,14.8650182 L11.1994029,19.2966541 C11.8251869,20.2068564 13.0703498,20.437423 13.9805521,19.811639 C14.0993242,19.7299806 14.208921,19.635722 14.3074326,19.5305061 L21.5271917,11.8193965 C21.9046601,11.416239 21.883835,10.7834166 21.4806774,10.4059481 C21.0775198,10.0284797 20.4446974,10.0493048 20.067229,10.4524624 Z"
                    id="形状结合"
                    fill="#FFFFFF"
                  ></path>
                </g>
              </svg>
              <span>得分：</span
              ><span class="number">{{ item.topScope || 0 }}</span
              ><span class="n-t">分</span>
            </span>
          </div>
          <div class="done-time">
            <span
              >考试时间：{{ trimDate(item.examinationStartDate) }} -
              {{ trimDate(item.examinationDeadlineDate) }}</span
            >
          </div>
        </div>
      </div>
      <!-- 已考过 结束 -->
    </template>
    <van-empty
      v-if="paperList && paperList.length == 0"
      :description="'暂无试卷哦~'"
    />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import {
  getQuestionBankPaperList,
  getQuestionBankOne
} from "~/api/v2-question-bank/question-bank";
export default {
  components: {
    WhiteHeader
  },
  data() {
    return {
      /* 试卷列表 */
      paperList: [],
      /* 当前题库 */
      questionBank: {
        questionGroupName: ""
      }
    };
  },
  filters: {
    formatQuestionType(val) {
      switch (val) {
        case "test":
          return "考试";
        case "special":
          return "训练";
        case "real":
          return "训练";
        default:
          return "未知";
      }
    }
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      }
    }),
    /* 题套Id */
    questionId() {
      return this.$route.query.id;
    },
    /* 试卷类型 1专项训练 2模拟考试 3真题训练 */
    questionType() {
      return this.$route.query.type;
    },
    title() {
      switch (this.questionType) {
        case "2":
          return "模拟考试";
        case "1":
          return "专项训练";
        case "3":
          return "真题训练";
        default:
          return "未知";
      }
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    /* 获取试卷状态 1正常 -1未开始  0已过期*/
    getTestPaperStatus(detail) {
      let current_date = new Date().getTime();
      let examinationStartDate = new Date(
        detail.examinationStartDate
      ).getTime();
      let examinationDeadlineDate = new Date(
        detail.examinationDeadlineDate
      ).getTime();
      if (
        examinationStartDate <= current_date &&
        current_date < examinationDeadlineDate
      ) {
        return 1;
      }
      if (examinationStartDate > current_date) {
        return -1;
      }
      if (examinationDeadlineDate < current_date) {
        return 0;
      }
    },
    /* 开始考试 */
    toStartTest(detail) {
      const { answerCount, testNum } = detail;
      if (answerCount == 0) {
        console.log("可以无限考！");
      } else {
        if (testNum < answerCount) {
          console.log(
            "已经考了" + testNum + "次；考次上限为" + answerCount + "次；"
          );
        } else {
          this.$toast("已达到考试上限次数！");
          return false;
        }
      }
      let status = this.getTestPaperStatus(detail);
      if (status == 0) {
        return this.$toast("已超过允许考试时间！");
      } else if (status == -1) {
        return this.$toast("还没到考试时间哦！");
      }
      this.$router.push({
        path: "/m/v2-test-paper",
        query: {
          id: this.questionId,
          testId: detail.id,
          type: this.questionType /* 试卷类型 1专项训练 2模拟考试 3真题训练 */
        }
      });
    },
    /* 格式化时间 */
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        return `${_date.getFullYear()}年${_date.getMonth() +
          1}月${_date.getDate()}日`;
      } else {
        return this.$t("locale.components.mobile.GroupChat.t7");
      }
    },
    /* 获取试卷列表 */
    async getPaperList() {
      let params = {
        questionGroupId: this.questionId,
        userId: this.user_info.id,
        type: this.questionType,
        sort:'id desc'
      };
      let result = await getQuestionBankPaperList(params);
      console.log("获取试卷列表:", result);
      if (result && result.data && result.data.code == 200) {
        const { rows, total, records } = result.data.data;
        this.paperList = rows;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 获取当前题库 */
    async getQuestionBankOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankOne(this.questionId);
      console.log("获取当前题库：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.questionBank = data;
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 跳转考试记录 */
    handleClickRight() {
      this.$router.push({
        path: "/m/v2-test-record",
        query: {
          questionType: this.questionType,
          id: this.questionId
        }
      });
    },
    initPage() {
      this.getPaperList();
      this.getQuestionBankOne();
    }
  },
  activated() {
    this.initPage();
  },
  created() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.simulation-test {
  background-color: #f7f7fa;
  min-height: 100vh;
  width: 7.2rem;
  .haed-tips {
    width: 6.624rem;
    height: 1.056rem;
    line-height: 1.4;
    margin: 0.384rem auto;
    background-color: #ffffff;
    border-radius: 0.1152rem;
    padding: 0.2rem 0.288rem;
    color: var(--theme-color);
    font-size: 0.2304rem;
    font-weight: bold;
  }
  .test-box {
    width: 6.624rem;
    height: 2.208rem;
    background-color: #ffffff;
    border-radius: 0.192rem;
    margin: 0 auto;
    position: relative;
    margin-bottom: 0.384rem;
    .logo-tips {
      display: block;
      width: 0.6528rem;
      height: 0.6528rem;
      position: absolute;
      top: 0.1rem;
      right: 0.1rem;
    }
    .test-content {
      width: 6rem;
      height: 2.208rem;
      padding: 0.288rem 0.1rem 0.288rem 0.288rem;
      .test-name {
        font-size: 0.288rem;
        color: #4a4b4d;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 0.1rem;
      }
      .test-info {
        width: 100%;
        height: 0.384rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.288rem 0 0.2rem;
        span {
          font-size: 0.2304rem;
          color: #abafb3;
          font-weight: bold;
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 0.288rem;
          background-color: #abafb3;
        }
      }
      .test-time {
        font-size: 0.2304rem;
        font-weight: bold;
        color: #abafb3;
        display: flex;
        align-items: center;
        img {
          width: 0.2592rem;
          height: 0.2592rem;
          background: var(--theme-color);
          display: block;
          margin-right: 0.1rem;
        }
      }
    }
  }
  .done-test {
    width: 6.624rem;
    height: 2.208rem;
    background-color: #ffffff;
    border-radius: 0.192rem;
    margin: 0 auto;
    position: relative;
    margin-bottom: 0.384rem;
    .done-content {
      width: 6.624rem;
      height: 2.208rem;
      padding: 0.288rem 0.288rem 0.288rem 0.288rem;
      .done-title {
        width: 100%;
        font-size: 0.288rem;
        color: #4a4b4d;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        .title-left {
          width: 5.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .title-right {
          font-size: 0.2304rem;
          color: var(--theme-color);
        }
      }
      .done-info {
        width: 100%;
        height: 0.384rem;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        // margin: .288rem 0 .2rem;
        margin: 0.2rem 0 0.288rem;
        .svg-box {
          width: 0.2688rem;
          height: 0.2688rem;
          // width: .288rem;
          // height: .288rem;
          background-color: var(--theme-color);
          transform: translateY(0.05rem);
          // margin-right: .05rem;
        }
        .svg-box-last {
          margin-right: 0.05rem;
        }
        img {
          width: 0.2688rem;
          height: 0.2688rem;
          // width: .288rem;
          // height: .288rem;
          display: inline-block;
          margin-right: 0.05rem;
          background-color: var(--theme-color);
          transform: translateY(0.05rem);
        }
        .red {
          color: #f39090;
        }
        span {
          font-size: 0.2304rem;
          color: #7a7d80;
          font-weight: bold;
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 0.288rem;
          background-color: #abafb3;
          transform: translateY(0.05rem);
        }
        .fraction {
          .number {
            font-size: 0.384rem;
            font-weight: 500;
            color: var(--theme-color);
          }
          .n-t {
            color: var(--theme-color);
          }
        }
      }
      .done-time {
        font-size: 0.2304rem;
        font-weight: bold;
        color: #abafb3;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
